/*
 * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH under
 * one or more contributor license agreements. See the NOTICE file distributed
 * with this work for additional information regarding copyright ownership.
 * Licensed under the Camunda License 1.0. You may not use this file
 * except in compliance with the Camunda License 1.0.
 */

@use '@carbon/type';
@use '@carbon/layout';
@use 'src/common/tasks/available-tasks/variables' as vars;

.label {
  @include type.type-style('label-01');
  color: var(--cds-text-secondary);

  &.labelPrimary {
    color: var(--cds-text-primary);
  }

  &.contextWrap {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
  }
}

.name {
  @include type.type-style('body-short-02');
  color: var(--cds-text-primary);
}

.flex {
  min-height: layout.to-rem(20px);
  display: flex;

  &.flexRow {
    flex-direction: row;
    justify-content: space-between;
  }

  &.flexColumn {
    flex-direction: column;
    justify-content: center;
  }

  & .clip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &.alignItemsEnd {
    align-items: flex-end;
  }
}

.taskLink {
  all: unset;
  height: 100%;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
}

.fullWidthAndHeight {
  width: 100%;
  height: 100%;
}

.container {
  cursor: pointer;

  &.active .taskLink {
    background-color: var(--cds-layer-selected);
    border-left: vars.$ENTRY_SELECTED_BORDER_WIDTH solid
      var(--cds-border-interactive);
    padding: vars.$SPACING vars.$SPACING vars.$SPACING
      calc(vars.$SPACING - vars.$ENTRY_SELECTED_BORDER_WIDTH);
  }

  &.active:last-child .taskLink {
    padding: vars.$SPACING vars.$SPACING vars.$SPACING
      calc(vars.$SPACING - vars.$ENTRY_SELECTED_BORDER_WIDTH);
  }

  &.active + & .task-link:not(:focus) {
    border-top: none;
    padding: vars.$SPACING;
  }

  &:not(.active) {
    &:hover .task-link {
      background-color: var(--cds-layer-hover);
    }

    &:last-child .taskLink {
      border-bottom: vars.$ENTRY_DEFAULT_BORDER_WIDTH solid
        var(--cds-border-subtle-selected);
      padding: calc(vars.$SPACING - vars.$ENTRY_DEFAULT_BORDER_WIDTH)
        vars.$SPACING;
    }

    & .taskLink {
      border-top: vars.$ENTRY_DEFAULT_BORDER_WIDTH solid
        var(--cds-border-subtle-selected);
      padding: calc(vars.$SPACING - vars.$ENTRY_DEFAULT_BORDER_WIDTH)
        vars.$SPACING vars.$SPACING vars.$SPACING;
    }
  }

  & .taskLink:focus {
    border: none;
    padding: vars.$SPACING;
    outline: vars.$ENTRY_FOCUSED_BORDER_WIDTH solid var(--cds-focus);
    outline-offset: -(vars.$ENTRY_FOCUSED_BORDER_WIDTH);
  }

  &:last-child .taskLink:focus {
    padding: vars.$SPACING;
  }

  &:first-child .taskLink {
    border-top-color: transparent;
  }
}

.popoverContent {
  padding: var(--cds-spacing-03);
}

.popoverHeading {
  color: var(--cds-text-primary);
  @include type.type-style('heading-01');
}

.popoverBody {
  color: var(--cds-text-primary);
  @include type.type-style('body-short-01');
}

.inlineIcon {
  vertical-align: text-bottom;
  margin-right: var(--cds-spacing-01);
}
